<template>
    <div class="table-box">
        <el-table
          ref="skuTableRef"
          :data="skuStatisticData"    
          style="width: 100%; height: 100%;"
          :header-cell-style="{ textAlign: 'center' }" 
          :cell-style="{ textAlign: 'center' }"
          :summary-method="getSummaries"
          show-summary
          v-loading="loading"
          element-loading-text="商品统计数据加载中..."
          border
        >
          <el-table-column prop="skuName" label="商品名称" width="120" />
          <el-table-column prop="skuBrand" label="商品牌号"  width="100" />
          <el-table-column prop="internalBrand" label="内部牌号"  width="100" />
          <el-table-column prop="specification" label="规格型号" width="140" />
          <el-table-column prop="sumQuantity" label="总订单量"  width="110" />
          <el-table-column prop="sumWeight" label="总订货重量" width="110" >
            <template #default="scope">
              <span>{{ scope.row.sumWeight ?? "N/A" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalAmount" label="总金额" width="120" />
          <el-table-column prop="avgUnitPrice" label="平均单价" width="100" />
          <el-table-column prop="compltOrdNum" label="订单完成数" min-width="100" />
          <el-table-column prop="orderNum" label="订单数" width="100" />
          <el-table-column prop="clientNum" label="客户数" width="100"/>
          <el-table-column prop="byQuantity" label="按数量" width="80">
            <template #default="scope">
              <span>{{ scope.row.byQuantity ? "是" : "否" }}</span>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <div class="pagination-box">
        <el-pagination 
            layout="sizes, prev, pager, next" 
            :page-sizes="[5, 10, 20, 50]"
            :total="total"
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, h, onMounted } from 'vue'
import { getStatisticSku } from '@/pages/home/views/sale/api/statistic'
import { ElMessage } from 'element-plus'
import { dragTable } from '@/pages/home/views/sale/utils/dragTable'

const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(0)
const skuStatisticData = ref([])
const loading = ref(true)
const skuTableRef = ref()

const getSummaries = (param) => {
    const { columns, data } = param
    const sums = []
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = h('div', {style:{ fontWeight:'600', color:'black' }}, '汇总')
            return
        }
        const values = data.map((item) => item[column.property])
        if(column.property === "avgUnitPrice") sums[index] = 'N/A'
        else if (values.every((value) => Number.isFinite(value))) {
            sums[index] = Number(values.reduce((prev, curr) => {
                return prev + curr
            }, 0).toFixed(2))
        }
        else {
            sums[index] = 'N/A'
        }
    })
    return sums
}

const handleCurrentChange = (val) => {
    pageNum.value = val
    getSkuTableData()
}

const handleSizeChange = (val) => {
    pageSize.value = val
    getSkuTableData()
}

const getSkuTableData = async (orderDt?) => {
    loading.value = true
    const res = await getStatisticSku({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    orderDtFrom: orderDt?.[0] ?? "",
    orderDtTo: orderDt?.[1] ?? "",
  })
  if(!res.data.success){
    ElMessage.error(`${res.data.errorCode}: ${res.data.errorMsg}`)
    return
  }
  skuStatisticData.value = res.data.data.list
  total.value = res.data.data.total
  loading.value = false
  console.log("skuStatisticData:", res.data.data)
}

onMounted(() => {
    dragTable(skuTableRef)
})

defineExpose({
    getSkuTableData
})
</script>

<style scoped>
.table-box{
    height: calc(100% - 32px);
}
.pagination-box {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
}
.el-table {
    --el-table-header-bg-color: var(--el-bg-color-page);
    --el-table-border-color: var(--el-border-color-dark);
    --el-table-header-text-color: var(--el-text-color-primary);
}
:deep(.el-table__footer-wrapper tfoot tr td.el-table__cell){
  text-align: center;
}

</style>